function tool(map, trafficLayer) {
	$('.toolshow').on('mouseover', function () {
		console.log(111)
		layer.tips('点击显示控件', this, {
			tips: [1, '#0FA6D8'] //还可配置颜色
		});
	})
	$('.toolshow').on('click', function () {
		if ($('.button-group').css('display') == 'none') {
			$('.button-group').css('display', 'block')
		} else {
			$('.button-group').css('display', 'none')
		}

	})


	var scale = new AMap.Scale({
		visible: false
	}),
		toolBar = new AMap.ToolBar({
			visible: false
		}),
		overView = new AMap.OverView({
			visible: false
		});
	var rectOptions = {
		strokeStyle: "dashed",
		strokeColor: "#FF33FF",
		fillColor: "#FF99FF",
		fillOpacity: 0.5,
		strokeOpacity: 1,
		strokeWeight: 2
	};
	//控件
	map.addControl(scale);
	map.addControl(toolBar);
	map.addControl(overView);

	$('#real_time').on('click', function () {

		if (this.checked) {
			trafficLayer.show()
		} else {
			trafficLayer.hide()
		}
	})
	$('#poi').on('click', function () {
		if (this.checked) {
			$('#pickerBox').css('display', 'block')
		} else {
			$('#pickerBox').css('display', 'none')
		}
	})
	$('#admarea').on('click', function () {
		if (this.checked) {
			$('#tip').css('display', 'block')
		} else {
			$('#tip').css('display', 'none')
		}
	})
	$('.scale').on('click', function () {
		toggleScale(this)
	})
	$('#toolbar').on('click', function () {
		toggleToolBar(this)
	})
	$('#toolbarDirection').on('click', function () {
		toggleToolBarDirection(this)
	})
	$('#toolbarRuler').on('click', function () {
		toggleToolBarRuler(this)
	})
	$('#overview').on('click', function () {
		toggleOverViewShow(this)
	})
	$('#overviewOpen').on('click', function () {
		toggleOverViewShow(this)
	})
	$('#shrink').on('click', function () {
		var that = this
		map.plugin(["AMap.MouseTool"], function () {
			if ($('#magnify')[0].checked) {
				$('#magnify')[0].checked = false
				mouseTool.close()
			}
			if (that.checked) {
				mouseTool = new AMap.MouseTool(map);
				mouseTool.rectZoomOut(rectOptions);
				//通过rectOptions更改拉框放大时鼠标绘制的矩形框样式
			} else {
				console.log(mouseTool)
				mouseTool.close()
			}
		});
	})
	$('#magnify').on('click', function () {
		var that = this
		map.plugin(["AMap.MouseTool"], function () {
			if ($('#shrink')[0].checked) {
				$('#shrink')[0].checked = false
				mouseTool.close()
			}
			if (that.checked) {
				mouseTool = new AMap.MouseTool(map);
				mouseTool.rectZoomIn(rectOptions);
				//通过rectOptions更改拉框放大时鼠标绘制的矩形框样式
			} else {
				console.log(mouseTool)
				mouseTool.close()
			}
		});
	})
	$('#distance').on('click', function () {
		var that = this
		map.plugin(["AMap.RangingTool"], function () {
			ruler1 = new AMap.RangingTool(map);
			ruler1.on('end',function(){
				console.log(1)
				ruler1.turnOff();
				that.checked = false
			})
			

		});
		if (that.checked) {
			ruler1.turnOn();
		} else {
			ruler1.turnOff();
		}
	})

	function toggleScale(checkbox) {
		if (checkbox.checked) {
			scale.show();
		} else {
			scale.hide();
		}
	}

	function toggleToolBar(checkbox) {
		if (checkbox.checked) {
			showToolBar();
			showToolBarDirection();
			showToolBarRuler();
		} else {
			hideToolBar();
			hideToolBarDirection();
			hideToolBarRuler();
		}
	}

	function toggleToolBarDirection(checkbox) {
		if (checkbox.checked) {
			toolBar.showDirection()
		} else {
			toolBar.hideDirection()
		}
	}

	function toggleToolBarRuler(checkbox) {
		if (checkbox.checked) {
			toolBar.showRuler();
		} else {
			toolBar.hideRuler();
		}
	}

	function toggleOverViewShow(checkbox) {
		if (checkbox.checked) {
			overView.show();
			overView.open();
		} else {
			overView.hide();
			overView.close();
		}
	}

	function toggleOverViewOpen(checkbox) {
		if (checkbox.checked) {
			overView.open();
		} else {
			overView.close();
		}
	}

	function showToolBar() {
		document.getElementById('toolbar').checked = true;
		document.getElementById('toolbarDirection').disabled = false;
		document.getElementById('toolbarRuler').disabled = false;
		toolBar.show();
	}

	function hideToolBar() {
		document.getElementById('toolbar').checked = false;
		document.getElementById('toolbarDirection').disabled = true;
		document.getElementById('toolbarRuler').disabled = true;
		toolBar.hide();
	}

	function showToolBarDirection() {
		document.getElementById('toolbarDirection').checked = true;
		toolBar.showDirection();
	}

	function hideToolBarDirection() {
		document.getElementById('toolbarDirection').checked = false;
		toolBar.hideDirection();
	}

	function showToolBarRuler() {
		document.getElementById('toolbarRuler').checked = true;
		toolBar.showRuler();
	}

	function hideToolBarRuler() {
		document.getElementById('toolbarRuler').checked = false;
		toolBar.hideRuler();
	}
}
//右键点击地图
function rightclick(map, imgarr, origin, layuitable) {
	var content =
		`<div class="context-menu-content">
        <ul class='context_menu'>
           <li class='add_interest'>添加兴趣点</li>
           <li class='look_num'>拉框查看车辆数量</li>
           <li class='creat_rail'>点击创建电子围栏</li>
        </ul>
    </div>`;
	var contextMenu = new AMap.ContextMenu({
		isCustom: true,
		content: content
	});

	map.on('rightclick', function (e) {
		rightclick1(e)
	});
	function rightclick1(e) {
		contextMenu.open(map, e.lnglat);
		$('.add_interest').on('click', function () {
			map.on('rightclick', function (e) {
				contextMenu.close();
			});
			add_interest(contextMenu, e.lnglat)
		})
		$('.look_num').on('click', function () {
			map.on('rightclick', function (e) {
				contextMenu.close();
			});
			look_num(contextMenu)
		})
		$('.creat_rail').on('click', function () {
			map.on('rightclick', function (e) {
				contextMenu.close();
			});
			creat_rail(contextMenu)
		})
	}
	//创建电子围栏
	function creat_rail(contextMenu) {
		contextMenu.close()
		var drawtype=0;
				var mouseTool = new AMap.MouseTool(map); //在地图中添加MouseTool插件
				var drawPolygon;
				var drawbtn = layer.open({
					type: 1,
					title:false,
					id:'drawbtn',
					skin: 'layui-layer-rim', //加上边框
					area: ['300px', '100px'], //宽高
					content: `
					<div style='width:100%;height:100%;padding:0 10px'>
					  	<table style='width:100%;'>
					  		
					  		<tr>
						  		<td data-id="{$item.car_rental_id}" style='text-align:center'>
									<div class="tpl-table-black-operation">
										<a class="drawgon layui-btn layui-btn-sm layui-btn-primary" style='margin-top:30px'>
											<i class="am-icon-pencil"></i>绘制多边
										</a>
										<a class="drawline layui-btn layui-btn-sm layui-btn-primary"  style='margin-top:30px'>
											<i class="am-icon-pencil"></i>绘制线性
										</a>
										<a class="drawcircle layui-btn layui-btn-sm layui-btn-primary" style='margin-top:30px'>
											<i class="am-icon-pencil"></i> 绘制点型
										</a>
									</div>
								</td>
								
							</tr>
						</table>
						
				  	</div>
				    `,
					success:function(){
						$('.drawgon').unbind()
					  	$('.drawgon').on('click',function(){
							map.on('rightclick', function (e) {
								contextMenu.close();
							});
					  		drawtype=1;
					  		 	layer.close(drawbtn);
					  			var ilarea=layer.open({
									type: 1,
									id:'ilarea',
									title:false,
									skin: 'layui-layer-rim', //加上边框
									area: ['300px', '100px'], //宽高
									content: `
									<div style='width:100%;height:100%;padding:0 10px'>
									  	<table style='width:100%;'>
									  		<tr>
										  		<td data-id="{$item.car_rental_id}" style='text-align:center'>
													<div class="tpl-table-black-operation">
														<a class="intoarea layui-btn layui-btn-sm layui-btn-primary" style='margin-top:30px'>
															<i class="am-icon-pencil"></i>进区域报警
														</a>
														<a class="leavearea layui-btn layui-btn-sm layui-btn-primary"  style='margin-top:30px'>
															<i class="am-icon-pencil"></i>出区域报警
														</a>
													</div>
												</td>
												
											</tr>
										</table>
										
								  	</div>
								    `,
									success:function(){
										$('.intoarea').on('click',function(){
											console.log(11)
											drawfence()
											layer.close(ilarea);
										})
										$('.leavearea').on('click',function(){
											console.log(2)
											drawfence()
											layer.close(ilarea);
										})
									}
								})
					  			
						})
						$('.drawline').unbind()
						$('.drawline').on('click',function(){
							drawtype=2;
							layer.close(drawbtn);
							drawfence()
						})
						$('.drawcircle').unbind()
						$('.drawcircle').on('click',function(){
							drawtype=3;
							layer.close(drawbtn);
							drawfence()
						})
					},
					end:function(){
						map.on('rightclick', function(e) {
							rightclick1(e)
						});
					}
				});
				function drawfence(){
					let drawobj;
					if(drawtype==1){
						drawPolygon = mouseTool.polygon(); //用鼠标工具画多边形
					}else if(drawtype==2){
						drawPolyline = mouseTool.polyline()
					}else{
						var radius=10;
						var ra =layer.open({
							type: 1,
							id:'ra',
							title:false,
							skin: 'layui-layer-rim', //加上边框
							area: ['300px', '200px'], //宽高
							content: `<div style='padding:10px'>
										<div class='layui-form-item'>
											请输入半径：<input type='number' class='radius layui-input' value='10'/>
										</div>
										<div>
											<button class="layui-btn layui-btn-normal ra_ok" >确定</button>
											<button class="layui-btn layui-btn-primary ra_no">取消</button>
										</div>
									</div>`,
							success:function(){
								let drawis=true;
								$('.ra_ok').on('click',function(){
									radius=$('.radius').val()
									layer.close(ra)
									map.on('click', function(e) {
										if(drawis){
											drawis=false;
											console.log(e.lnglat.getLng())
											drawobj = new AMap.Circle({
												map: map,
												center:new AMap.LngLat(e.lnglat.getLng(),e.lnglat.getLat()),
												radius:(radius-0),
												strokeColor: "#F33",
												strokeOpacity: 1,
												strokeWeight: 3,
												fillColor: "ee2200",
												fillOpacity: 0.35
											});
											//编辑好的对象右键点击
											let contentobj =
												`<div class="context-menu-content">
												<ul class='context_menu'>
													<li class='drawobj_edit'>编辑</li>
													<li class='drawobj_delete'>删除</li>
												</ul>
											</div>`;
											let contextMenuobj = new AMap.ContextMenu({
												isCustom: true,
												content: contentobj
											});
											map.on('rightclick', function(e) {
												rightclick1(e)
											});
											drawobj.on('rightclick', function (e) {
												let that=this;
												contextMenuobj.open(map, e.lnglat);
												$('.drawobj_edit').on('click',function(){
													contextMenuobj.close();
													
													map.plugin(["AMap.CircleEditor"],function(){
														circleEditor = new AMap.CircleEditor(map,that); 
														circleEditor.open(); 
														var draw1= layer.open({
															type: 1,
															title:false,
															shade: 0,
															offset: ['100px', '250px'],
															skin: false, //加上边框
															area: ['150px', '100px'], //宽高
															content: `<div style='text-align:center'>
																		<button class='layui-btn layui-btn-primary draw_ok' style='margin-top:30px'>编辑完成</button>
																	</div>`,
															success:function(){
																$('.draw_ok').on('click',function(){
																	circleEditor.close()
																	layer.close(draw1)
																})
															}
														});
													});   
												})
												$('.drawobj_delete').on('click',function(){
													contextMenuobj.close();
													map.remove(that)
												})
											});
										}
										 
									});
								})
								$('ra_no').on('click',function(){
									layer.close(ra)
								})
							}
								
								
							})
					}
					if(drawtype==1||drawtype==2){
						AMap.event.addListener(mouseTool, 'draw', function(res) { //添加事件  
							map.on('rightclick', function(e) {
								rightclick1(e)
							});
							mouseTool.close(true);
							console.log(res.obj.getPath())
							if(drawtype==1){
								drawobj=new AMap.Polygon({
									path: res.obj.getPath(),  
									fillColor: 'blue', // 多边形填充颜色
									borderWeight: 2, // 线条宽度，默认为 1
									strokeColor: 'blue', // 线条颜色
								});
							}else if(drawtype==2){
								drawobj=new AMap.Polyline({
									path:res.obj.getPath(),     //设置折线的节点数组
									strokeColor:"blue",
									strokeOpacity:0.4,
									strokeWeight:3,
									strokeStyle:"solid",
									strokeDasharray:[10,5]
								}); 
							}else{

							}
							drawobj.setMap(map);
							//编辑好的对象右键点击
							let contentobj =
								`<div class="context-menu-content">
								<ul class='context_menu'>
									<li class='drawobj_edit'>编辑</li>
									<li class='drawobj_delete'>删除</li>
								</ul>
							</div>`;
							let contextMenuobj = new AMap.ContextMenu({
								isCustom: true,
								content: contentobj
							});

							drawobj.on('rightclick', function (e) {
								let that=this
								contextMenuobj.open(map, e.lnglat);
								$('.drawobj_edit').on('click',function(){
									contextMenuobj.close();
									map.plugin(["AMap.PolyEditor"],function(){
										polylineEditor = new AMap.PolyEditor(map,that); 
										polylineEditor.open(); 
										let draw1= layer.open({
											type: 1,
											title:false,
											shade: 0,
											offset: ['100px', '250px'],
											skin: false, //加上边框
											area: ['150px', '100px'], //宽高
											content: `<div style='text-align:center'>
														<button class='layui-btn layui-btn-primary draw_ok' style='margin-top:30px'>编辑完成</button>
													</div>`,
											success:function(){
												$('.draw_ok').on('click',function(){
													polylineEditor.close()
													layer.close(draw1)
												})
											}
										});
									});   
								})
								$('.drawobj_delete').on('click',function(){
									contextMenuobj.close();
									map.remove(that)
								})
							});
						});
					}
					
				}
	}
	//查看框内车辆信息
	function look_num(contextMenu) {
		contextMenu.close()
		var rectOptions = {
			strokeStyle: "dashed",
			strokeColor: "#FF33FF",
			fillColor: "#FF99FF",
			fillOpacity: 0.5,
			strokeOpacity: 1,
			strokeWeight: 2
		};
		map.plugin(["AMap.MouseTool"], function () {
			var mouseTool = new AMap.MouseTool(map);
			mouseTool.polygon(rectOptions);
			AMap.event.addListener(mouseTool, 'draw', function (res) {
				map.on('rightclick', function(e) {
					rightclick1(e)
				});
				console.log('wancheng')
				mouseTool.close(true)
				var path = []
				//获取绘制的多边型的范围
				for (var pathidx = 0; pathidx < res.obj.getPath().length; pathidx++) {
					var pathlist = [];
					pathlist.push(res.obj.getPath()[pathidx].L)
					pathlist.push(res.obj.getPath()[pathidx].N)
					path.push(pathlist)
				};
				var carnumb = 0;
				var area_car = []
				//获取在此范围内的车辆
				var area_prop = `<div>
						<div>该区域内有<span class='carnumb'>${carnumb}</span> 辆车</div>
							<table class='layui-table'>
								<thead>
									<tr>
										<th>车牌号</th>
										<th>状态</th>
										<th>经纬度</th>
									</tr>
								</thead>
								<tbody>`
				for (var ploidx = 0; ploidx < origin.car.length; ploidx++) {

					if (origin.car[ploidx].point) {
						var marker2InPolygon = AMap.GeometryUtil.isPointInRing(origin.car[ploidx].point.getPosition(), path);
						if (marker2InPolygon) {
							carnumb++;
							area_car.push(origin.car[ploidx])
							area_prop += `<tr>
										<td>${origin.car[ploidx].number}</td>
										<td>${origin.car[ploidx].state_name}</td>
										<td>${origin.car[ploidx].loc}</td>
									</tr>`
						}
					}
				}
				area_prop += `</tbody>
							</table>
						</div>`
				layer.open({
					type: 1,
					title: false,
					skin: 'layui-layer-rim', //加上边框
					area: ['800px', '500px'],
					content: area_prop,
					success: function () {
						console.log(origin.car)
						$('.carnumb').html(carnumb)
					}
				})
			})
		});

	}
	//添加兴趣点
	function add_interest(contextMenu, lnglat) {
		contextMenu.close()
		let interestpropmain = `
	        	<div class='layui-col-sm12  interest' style='padding:10px'>
	        		<div class='layui-col-sm12 cl-p'>
	        			选择图标:
	        		</div>
		        	<div class='layui-row cl-p'>
		        		<ul  class='layui-col-sm12 cl-p'>`
		for (let i = 0; i < imgarr.length; i++) {
			interestpropmain += `<li class='am-fl interest_img layui-col-sm2 cl-p' data-action='0'><img style='width:50%;margin-left:25%' src='${imgarr[i]}'/></li>`
		}
		interestpropmain += `</ul>
		        	</div>
		        	<div class='layui-col-sm12 cl-p' >
	        			半径:
	        		</div>
		        	<div class='layui-col-sm12 cl-p'  >
						<input type='number' class='layui-input interest_radius' placeholder='请输入半径'/>
	        		</div>
		        	<div class='layui-col-sm12 cl-p' >
	        			备注:
	        		</div>
	        		
	        		<div class='layui-col-sm12 cl-p'  >
						<textarea style='height:100px;width:100%;padding:10px;box-sizing:border-box' name='interest_ps'></textarea>
	        		</div>
		        	<div class='layui-col-sm12' style='padding-top:10px'>
		        		<button class='layui-btn layui-btn-sm interest_ok'>确定</button>
		        	</div>
	        	</div>
				`;
		var interestprop = layer.open({
			type: 1,
			title: false,
			skin: 'layui-layer-rim', //加上边框
			area: ['420px', '300px'], //宽高
			content: interestpropmain,
			success: function () {
				//图片的选中
				$('.interest_img').on('click', function () {
					console.log($(this).data('action'))
					for (var inidx = 0; inidx < $('.interest_img').length; inidx++) {
						$('.interest_img').eq(inidx).data('action', 0);
						$('.interest_img').eq(inidx).removeClass('beidou_interest_img_active')
					}
					$(this).data('action', 1);
					$(this).addClass('beidou_interest_img_active')
				});
				//确定
				$('.interest_ok').on('click', function () {
					var radius_in=$('.interest_radius').val()
					var interestimg = '';
					var interestps = '';
					for (var inidx = 0; inidx < $('.interest_img').length; inidx++) {
						if ($('.interest_img').eq(inidx).data('action') == 1) {
							interestimg = $('.interest_img').eq(inidx).children('img').attr('src')
						}
					}
					interestps = $('.interest textarea[name="interest_ps"]').val()
					console.log(interestps)
					var interestinfoWindow;
					if (interestimg == '') { } else {
						AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
							var interestmaker = new SimpleMarker({
								//普通文本
								iconStyle: {
									src: interestimg,
									style: {
										width: '20px',
										height: '20px'
									}
								},
								
								cont: {
									ps: interestps
								},
								offset:new AMap.Pixel(-10, -10),
								position: lnglat,
								//					
							});
							origin.interest.push(interestmaker)
							layer.close(interestprop)
							interestmaker.setMap(map);
							var circle = new AMap.Circle({
							    map: map,
							    center:new AMap.LngLat(lnglat.lng,lnglat.lat),
							    radius:(radius_in-0),
							    strokeColor: "#F33",
							    strokeOpacity: 1,
							    strokeWeight: 3,
							    fillColor: "ee2200",
							    fillOpacity: 0.35
							}); 
							
							interestmaker.on('mouseover', function () {
								console.log('兴趣点移入')
								AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {
									interestinfoWindow = new SimpleInfoWindow({
										infoTitle: '<strong>' + "兴趣点信息" + '</strong>',
										infoBody: `<div>半径:${radius_in}米<br/>${interestps}</div>`,
										offset: new AMap.Pixel(0, -31)
									});
									interestinfoWindow.open(map, interestmaker.getPosition());
								})
							})
							interestmaker.on('mouseout', function () {
								console.log('兴趣点移除')
								interestinfoWindow.close()
							})
						})
					}
				})
				map.on('rightclick', function(e) {
					rightclick1(e)
				});	
			}
		});
	}

}